import 'package:flutter/material.dart';

class TXHGoodsListPage extends StatelessWidget {
  const TXHGoodsListPage({
    super.key,
  });

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.grey[100],
      appBar: AppBar(
        backgroundColor: Colors.white,
        elevation: 0,
        leading: IconButton(
          icon: const Icon(Icons.arrow_back, color: Colors.black),
          onPressed: () => Navigator.pop(context),
        ),
      ),
      body: ListView.builder(
        padding: const EdgeInsets.all(16),
        itemCount: 10, // 示例显示10个卡片
        itemBuilder: (context, index) {
          return Padding(
            padding: const EdgeInsets.only(bottom: 16),
            child: _GoodsCard(
              productName: '商品名称商品名称商品名称商品名称商品名称商品名称商品名称 ${index + 1}',
              startStation: '起点站名称 ${index + 1}',
              endStation: '学校名称 ${index + 1}',
              nearbyLocation:
                  '龙胜地铁站  ${(1.9 + index * 0.1).toStringAsFixed(1)}km',
              status: index % 3 == 0 ? '未开售' : null,
            ),
          );
        },
      ),
    );
  }
}

class _GoodsCard extends StatelessWidget {
  final String productName;
  final String startStation;
  final String endStation;
  final String nearbyLocation;
  final String? status;

  const _GoodsCard({
    required this.productName,
    required this.startStation,
    required this.endStation,
    required this.nearbyLocation,
    this.status,
  });

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(12),
        boxShadow: [
          BoxShadow(
            color: Colors.grey.withOpacity(0.1),
            spreadRadius: 1,
            blurRadius: 10,
            offset: const Offset(0, 2),
          ),
        ],
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          // 主要内容区域
          Padding(
            padding: const EdgeInsets.all(20),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                // 商品名称部分
                Row(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Container(
                      width: 40,
                      height: 40,
                      decoration: BoxDecoration(
                        color: Colors.grey[200],
                        borderRadius: BorderRadius.circular(8),
                      ),
                      child: Icon(Icons.shopping_bag_outlined,
                          color: Colors.grey[600]),
                    ),
                    const SizedBox(width: 12),
                    Expanded(
                      child: Text(
                        productName,
                        style: const TextStyle(
                          fontSize: 18,
                          fontWeight: FontWeight.w600,
                          color: Colors.black87,
                          height: 1.3,
                        ),
                      ),
                    ),
                  ],
                ),

                const SizedBox(height: 16),

                // 标签部分
                Row(
                  children: [
                    _buildTag('六年级专线', Colors.blue[100]!, Colors.blue[600]!),
                    const SizedBox(width: 8),
                    _buildTag(
                        '老用户优先购票', Colors.orange[100]!, Colors.orange[600]!),
                    const SizedBox(width: 8),
                    _buildTag('限时优惠', Colors.red[100]!, Colors.red[600]!),
                  ],
                ),

                const SizedBox(height: 24),

                // 时间信息部分
                _buildTimeInfo(
                    Icons.access_time, '老用户开售：', '2020.07.08  10:10:08'),
                const SizedBox(height: 12),
                _buildTimeInfo(
                    Icons.access_time, '全面开售：', '2020.07.08  12:12:08'),
                const SizedBox(height: 12),
                _buildTimeInfo(
                    Icons.calendar_today, '全 票', '2020.07.08 — 2022.12.08'),

                const SizedBox(height: 16),

                // 时间段信息
                Column(
                  children: [
                    _buildTimeSlot('往', '06:00', '14:00', Colors.green),
                    const SizedBox(height: 12),
                    _buildTimeSlot('返', '12:00', '18:00', Colors.orange),
                  ],
                ),

                const SizedBox(height: 24),

                // 路线信息
                _buildRouteInfo(),
              ],
            ),
          ),

          // 附近信息 - 贴住父视图边缘
          Container(
            width: double.infinity,
            padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 12),
            decoration: const BoxDecoration(
              color: Color(0xFFF6F6F6),
              borderRadius: BorderRadius.only(
                bottomLeft: Radius.circular(12),
                bottomRight: Radius.circular(12),
              ),
            ),
            child: Row(
              children: [
                Text(
                  '附近：',
                  style: TextStyle(
                    fontSize: 14,
                    color: Colors.grey[600],
                  ),
                ),
                Text(
                  nearbyLocation,
                  style: TextStyle(
                    fontSize: 14,
                    color: Colors.grey[600],
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildTag(String text, Color bgColor, Color textColor) {
    return Container(
      padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 6),
      decoration: BoxDecoration(
        color: bgColor,
        borderRadius: BorderRadius.circular(16),
        border: Border.all(color: textColor.withOpacity(0.3)),
      ),
      child: Text(
        text,
        style: TextStyle(
          fontSize: 12,
          color: textColor,
          fontWeight: FontWeight.w500,
        ),
      ),
    );
  }

  Widget _buildTimeInfo(IconData icon, String label, String time) {
    return Row(
      children: [
        Container(
          width: 24,
          height: 24,
          decoration: BoxDecoration(
            color: Colors.grey[200],
            borderRadius: BorderRadius.circular(4),
          ),
          child: Icon(icon, size: 16, color: Colors.grey[600]),
        ),
        const SizedBox(width: 12),
        Text(
          label,
          style: TextStyle(
            fontSize: 14,
            color: Colors.grey[700],
          ),
        ),
        Text(
          time,
          style: TextStyle(
            fontSize: 14,
            color: Colors.grey[600],
          ),
        ),
      ],
    );
  }

  Widget _buildTimeSlot(
      String direction, String startTime, String endTime, Color color) {
    return Row(
      children: [
        Container(
          width: 24,
          height: 24,
          decoration: BoxDecoration(
            color: color.withOpacity(0.2),
            borderRadius: BorderRadius.circular(4),
          ),
          child: Center(
            child: Text(
              direction,
              style: TextStyle(
                fontSize: 12,
                color: color,
                fontWeight: FontWeight.bold,
              ),
            ),
          ),
        ),
        const SizedBox(width: 12),
        Text(
          '$startTime  $endTime',
          style: TextStyle(
            fontSize: 14,
            color: Colors.grey[700],
          ),
        ),
      ],
    );
  }

  Widget _buildRouteInfo() {
    return Column(
      children: [
        // 起点站信息
        Row(
          children: [
            Container(
              width: 12,
              height: 12,
              margin: const EdgeInsets.only(left: 6), // 让圆点与"往"字中心对齐
              decoration: const BoxDecoration(
                color: Colors.green,
                shape: BoxShape.circle,
              ),
            ),
            const SizedBox(width: 18),
            Expanded(
              child: Text(
                startStation,
                style: const TextStyle(
                  fontSize: 16,
                  fontWeight: FontWeight.w600,
                  color: Colors.black87,
                ),
              ),
            ),
          ],
        ),
        // 虚线和路程信息
        Row(
          children: [
            const SizedBox(width: 12), // 与圆点中心对齐
            _buildDottedLine(),
            const SizedBox(width: 18), // 与虚线间距18
            Expanded(
              child: Text(
                '15站，约35分钟',
                style: TextStyle(
                  fontSize: 12,
                  color: Colors.grey[600],
                ),
              ),
            ),
          ],
        ),
        // 终点站信息
        Row(
          children: [
            Container(
              width: 12,
              height: 12,
              margin: const EdgeInsets.only(left: 6), // 让圆点与"往"字中心对齐
              decoration: const BoxDecoration(
                color: Colors.orange,
                shape: BoxShape.circle,
              ),
            ),
            const SizedBox(width: 18),
            Expanded(
              child: Text(
                endStation,
                style: const TextStyle(
                  fontSize: 16,
                  fontWeight: FontWeight.w600,
                  color: Colors.black87,
                ),
              ),
            ),
            if (status != null)
              Text(
                status!,
                style: TextStyle(
                  fontSize: 14,
                  color: Colors.grey[500],
                ),
              ),
          ],
        ),
      ],
    );
  }

  Widget _buildDottedLine() {
    return Column(
      children: List.generate(8, (index) {
        return Container(
          width: 1.5,
          height: 4,
          margin: EdgeInsets.only(bottom: index < 7 ? 2 : 0), // 最后一个不加底部间距
          decoration: BoxDecoration(
            color: Colors.grey[400],
            borderRadius: BorderRadius.circular(1),
          ),
        );
      }),
    );
  }
}
